<template>
  <div class="PlaceContainer"  v-drag>
    <div class="placeDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">地名搜索定位</div>
      </div>
      <div class="title-right">
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="placeDialogContent">
      <div class="search-box">
        <label for="Place">请输入地名地址:</label>
        <input type="text" id="Place" class="search-input" v-model="Place" placeholder="请输入"/>
      </div>

      <div class="search-button">
        <el-button type="primary" @click="PlaceToCenter">复位</el-button>
        <el-button type="primary" @click="PlaceToPosition">定位</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getPlaceLocation } from "@/api/quickPosition";
import { transform } from "ol/proj";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      Place: "",
      map: null,
      markerLayer: null,
    };
  },
  methods: {
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {
        } else {
          console.error("地名搜索定位地图实例未找到");
        }
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    PlaceToPosition() {
      if (!this.map) {
        console.error("地图未初始化");
        return;
      }
      getPlaceLocation(this.Place).then((res) => {
        if (res.code === 200) {
          let afterTransCoor = transform(
            [res.data.longitude, res.data.latitude],
            "EPSG:4326",
            "sz2000"
          );
          this.map.panTo([afterTransCoor[0], afterTransCoor[1]], 13);
          if (!this.markerLayer) {
            this.markerLayer =
              this.map.layer.createVectorLayer("pointMarkerLayer");
          }
          this.markerLayer.getSource().clear();
          this.map.marker.addMarker(
            afterTransCoor[0],
            afterTransCoor[1],
            this.markerLayer,
            {
              imgUrl: require("@/assets/bookMarker.png"),
              scale: 0.5, //大小
              radius: 1,
              pBorderColor: "#000000",
              pBorderWidth: 1,
              pFillColor: "",
            }
          );
        }
      });
    },
    PlaceToCenter() {
      this.map.panTo([314497.81,655844.50], 13);
    },
  },
  computed: {
    isPlaceShow() {
      return this.dialogVisible;
    },
  },
  destroyed() {
    if (this.markerLayer) {
      this.markerLayer.getSource().clear();
    }
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
.PlaceContainer {
  width: 15vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -70vw;
  height: 46vh;
  z-index: 2;
  .placeDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .placeDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
  }
  .search-box {
    display: flex; // 启用 flex 布局
    flex-direction: row; // 子元素水平排列
    width: 98%; /* 使两个搜索框并列显示，中间有一定的间隔 */
    line-height: 2rem;
    label {
      margin-left: 10px;
      font-size: 14px;
    }
  }
  .search-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-input {
    width: 51%;
    margin-left: 0.5rem;
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}

label {
  display: block;
  margin-bottom: 4px;
}
</style>
